<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>功能实现</title>
		<script src="js/jquery-1.11.1.js"></script>
		<!--JQuery操作动画
		 show()       功能：显示效果 本质：display：block
		 hide()       功能：隐藏效果 本质：display：none
		 
		 slideDown()   功能:向下(滑动式)效果
		 slideUp()     功能:向下(滑动式)效果
		 
		 fadeIn(毫秒数)  功能：淡入  本质：显示+透明度：0~1
		 fadeOut(毫秒数)  功能：淡出  本质：显示+透明度：1~0
		 -->
		<style>
		div{
			width: 500px;
			height: 500px;
			background: #ff0;
			display: none;
		}	
		</style>
	</head>
	<body>
		<button id="show">显示按钮</button>
		<button id="hide">隐藏按钮</button>
		<button id="sd">滑动式向下按钮</button>
		<button id="su">滑动式向下隐藏按钮</button>
		<button id="fi">淡入按钮</button>
		<button id="fo">淡出按钮</button>
		<div></div>
		<script>
			/*JQ动画：显示与隐藏*/
			$("#fo").click(function(){
				//隐藏 css属性直接给元素设置
				$("div").fadeOut();
			});
			/*JQ动画：显示与隐藏*/
			$("#fi").click(function(){
				//隐藏 css属性直接给元素设置
				$("div").fadeIn(6000);
			});
			/*JQ动画：显示与隐藏*/
			$("#su").click(function(){
				//隐藏 css属性直接给元素设置
				$("div").slideUp();
			});
			/*JQ动画：显示与隐藏*/
			$("#sd").click(function(){
				//隐藏 css属性直接给元素设置
				$("div").slideDown();
			});
			/*JQ动画：显示与隐藏*/
			$("#hide").click(function(){
				//隐藏 css属性直接给元素设置
				$("div").hide();
			});
			
			/*JQ动画：显示与隐藏*/
			$("#show").click(function(){
				//隐藏 css属性直接给元素设置
				$("div").show();
			});
			// $("button").click(function(){
			// 	//隐藏 css属性直接给元素设置
			// 	$("div").css("display","block").css("border-radius","50%").css("background","#f00");
			// });
		</script>
	</body>
</html>